<template>
    <div :id="id" :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from "echarts";
import resize from "./mixins/resize";

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: "chart",
        },
        id: {
            type: String,
            default: "chart",
        },
        width: {
            type: String,
            default: "200px",
        },
        height: {
            type: String,
            default: "200px",
        },
        title: {
            type: String,
            default: "图表",
        },
        xAxis: {
            type: Array,
            default: function () {
                return [];
            },
        },
        series: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data () {
        return {
            chart: null,
        };
    },
    mounted () {
        this.initChart();
    },
    beforeDestroy () {
        if (!this.chart) {
            return;
        }
        this.chart.dispose();
        this.chart = null;
    },
    watch: {
        xAxis: {
            deep: true,
            handler (val) {
                this.selfSetOption();
            },
        },
        series: {
            deep: true,
            handler (val) {
                this.selfSetOption();
            },
        },
        title: {
            deep: true,
            handler (val) {
                this.selfSetOption();
            },
        },
    },
    methods: {
        color16 () {
            //十六进制颜色随机
            var r = Math.floor(Math.random() * 256);
            var g = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var color = "#" + r.toString(16) + g.toString(16) + b.toString(16);
            return color;
        },
        initChart () {
            this.chart = echarts.init(document.getElementById(this.id));
            this.selfSetOption();
        },
        resetChart () {
            if (this.chart) {
                this.chart.clear();
                this.selfSetOption();
                this.chart.resize();
            } else {
                this.initChart();
            }
        },
        selfSetOption () {
            const lineWith = 2;
            const seriesData = this.series.map((serie, index) => {
                return {
                    name: serie.name,
                    type: "line",
                    data: serie.data,
                    symbol: "circle",
                    symbolSize: 5,
                    smooth: true,
                    emphasis: {
                        itemStyle: {
                            borderWidth: 7,
                        },
                    },
                    yAxisIndex: 0,
                    lineStyle: {
                        width: lineWith,
                    },
                    markPoint: {
                        data: [
                            { type: "max", name: "最大值" },
                            { type: "min", name: "最小值" },
                        ],
                    },
                    markLine: {
                        data: [{ type: "average", name: "平均值" }],
                    },
                };
            });
            const option = {
                xAxis: {
                    data: this.xAxis,
                    boundaryGap: false,
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                    },
                },
                yAxis: {
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        show: true,
                    },
                },
                grid: {
                    top: "20%",
                    left: "5%",
                    right: "5%",
                    bottom:"10%"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                    },
                    padding: [5, 10],
                },
                title: {
                    text: this.title,
                    textStyle: {
                        fontWeight: "bold",
                        fontSize: 18,
                        color: this.selfScss.titleColor,
                    },
                    left: "center",
                },
                legend: {
                    icon: "circle",
                    top: "5%",
                    left: "5%",
                    itemWidth: 10,
                    itemGap: 20,
                    textStyle: {
                        color: "#67729d",
                    },
                    selector: [
                        {
                            type: 'all',
                            // 可以是任意你喜欢的 title
                            title: '全选'
                        },
                        {
                            type: 'inverse',
                            title: '反选'
                        }
                    ]
                },
                toolbox: {
                    show: true,
                    feature: {
                        magicType: { show: true, type: ["line", "bar"] },
                        saveAsImage: { show: true },
                    },
                    right: "5%",
                    top: "5%",
                },
                series: seriesData,
            };
            this.chart.setOption(option);
        },
    },
};
</script>
